<template>
	<view class="sort">
		<view id="sortNav">
			<u-navbar
				:placeholder="true"
			>
				<template #left>
					<view class="sort-tabbar__left">
						<view class="sort-tabbar__left_icon" @click="tabbarNoticeClick"><u-icon name="chat" size="20"></u-icon></view>
						<view class="sort-tabbar__left_search">
							<u-search placeholder="请输入关键字搜索" 
							:showAction="false" inputAlign="center" :inputStyle="{'fontSize': '12px', 'width': '170px' , 'height': '28px'}"
							:searchIconSize="18" @search="onSearch"
							v-model="keyword"></u-search>
						</view>
					</view>
				</template>
			</u-navbar>
		</view>
		
		<view class="content" :style="{top: navHeight}">
			<view class="content-left">
				<view v-for="item in sortList" :key="item.id"
				      :class="active == item.id ? 'first-list-item active':'first-list-item'"
				      @click="handleFirstClick(item.id)"
				>{{item.name}}</view>
			</view>
			<view class="content-right">
				<view class="second-list-item" v-for="item in secondList" :key="item.id" @click="secondClick(item.id)">
				  <view class="list-item-image">
				    <image :src="item.image"></image>
				  </view>
				  <view class="list-item-name">{{item.name}}</view>
				</view>
			</view>
		</view>
		
		<u-tabbar
			value="sort"
			:safeAreaInsetBottom="false"
			activeColor="#f56c6c"
		>
			<u-tabbar-item text="首页" name="index" icon="home" @click="tabbarClick" ></u-tabbar-item>
			<u-tabbar-item text="分类" name="sort" icon="grid-fill"></u-tabbar-item>
			<u-tabbar-item text="购物车" name="cart" icon="shopping-cart" @click="tabbarClick" ></u-tabbar-item>
			<u-tabbar-item text="我的" name="mine" icon="account" @click="tabbarClick" ></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script lang="ts" setup>
	import {manageSort} from "../../utils/getSort"
	import {getCurrentInstance, onMounted, ref} from "vue"
	import {onLoad} from "@dcloudio/uni-app"
	
	const { proxy }: any = getCurrentInstance()
	const keyword = ref('')
	const active = ref(1)
	const navHeight = ref('')
	const sortList = ref<any>([])
	const secondList = ref<any>([])
	const minioUrl = ref(proxy.$minioUrl)
	
	const onSearch = () => {
		uni.navigateTo({
			url: '/goods/goods_list/goods_list?keyword=' + keyword.value
		})
	}
	
	const tabbarNoticeClick = () => {
		uni.navigateTo({
		  url: '/notices/notice_list/notice_list'
		})
	}
	
	const tabbarClick = (e: string) => {
		uni.redirectTo({
			url: '/pages/'+e+"/"+e
		});
	}
	
	const handleFirstClick = (id: number) => {
	  if(active.value !== id){
	    active.value = id
	  }
	  for(let i = 0;i<sortList.value.length;i++){
	    if(sortList.value[i].id === id){
	      secondList.value = sortList.value[i].children;
	    }
	  }
	}
	
	const secondClick = (id: number) => {
		let sSort = id
		uni.navigateTo({
			url: "/goods/goods_list/goods_list?sSort=" + sSort
		})
	}
	
	onMounted(()=> {
	  proxy.ajax(proxy.api.getAllSort, 'GET', null,function (resp: any){
	    let list =  resp.data.sortList
	    if(list.length > 0){
			sortList.value = manageSort(list,minioUrl.value)
			secondList.value = sortList.value[0].children
	    }
	    console.log(secondList.value)
	  })
	})
	
	onLoad(()=>{
	  const query = uni.createSelectorQuery()
	  query.select("#sortNav").boundingClientRect(function(rect: any){
	    navHeight.value = rect['height'] + 'px'
	  }).exec()
	})
</script>

<style lang="scss">
@import "style.scss";
</style>
